<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>The Ajax 02 Page</h1>
    <button onclick="doAjaxGet()">Do Ajax Get</button>
    <button onclick="doAjaxPost()">Do Ajax Post</button>
    <button onclick="doAjaxPut()">Do Ajax Put</button>
    <button onclick="doAjaxDelete()">Do Ajax Delete</button>
</div>
<div id="result">

</div>
<script>
    function doAjaxGet(){
        var xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function (){
            if(xhr.readyState==4&&xhr.status==200){
                document.getElementById("result").innerText=xhr.responseText;
            }
        }
        xhr.open("get","http://localhost/doAjaxGet",true);
        xhr.send(null);//get请求不用传数据
    }
    function doAjaxPost(){
        let xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function (){
            if(xhr.readyState==4&&xhr.status==200){
                document.getElementById("result").innerText=xhr.responseText;
            }
        }
        xhr.open("post","http://localhost/doAjaxPost",true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
        xhr.send("id=200&name=xiaomi&remark=very good");//post请求数据要写到send方法中
    }
    function doAjaxPut(){
        let xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function (){
            if(xhr.readyState==4&&xhr.status==200){
                document.getElementById("result").innerText=xhr.responseText;
            }
        }
        xhr.open("put","http://localhost/doAjaxUpdate",true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
        xhr.send("id=200&name=huawei&remark=very great");
    }
    function doAjaxDelete(){
        let xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function (){
            if(xhr.readyState==4&&xhr.status==200){
                document.getElementById("result").innerText=xhr.responseText;
            }
        }
        xhr.open("delete","http://localhost/doAjaxDelete/200",true);
        xhr.send(null);
    }

</script>
</body>
</html>